<!-- modules/HorizontalMenu.vue - 水平布局菜单 -->
<template>
    <!-- 🚀 传送到头部 -->
    <Teleport to="#header-menu-container">
      <div class="horizontal-menu-wrapper">
        <el-menu
          mode="horizontal"
          :default-active="$route.path"
          :router="true"
          :ellipsis="false"
          class="vilan-menu horizontal-menu"
        >
          
          <!-- 🎯 静态数据渲染 -->
          <template v-if="!useDynamic">
            <el-menu-item index="/dashboard">
              <el-icon><Odometer /></el-icon>
              仪表板
            </el-menu-item>
            
            <el-sub-menu index="system">
              <template #title>
                <el-icon><Setting /></el-icon>
                系统管理
              </template>
              <el-menu-item index="/system/user">用户管理</el-menu-item>
              <el-menu-item index="/system/role">角色管理</el-menu-item>
              <el-menu-item index="/system/menu">菜单管理</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="user">
              <template #title>
                <el-icon><Avatar /></el-icon>
                用户中心
              </template>
              <el-menu-item index="/user/profile">个人资料</el-menu-item>
              <el-menu-item index="/user/setting">账户设置</el-menu-item>
            </el-sub-menu>
            
            <el-menu-item index="/about">
              <el-icon><InfoFilled /></el-icon>
              关于
            </el-menu-item>
          </template>
          
          <!-- 🎯 动态数据渲染 -->
          <template v-else>
            <template v-for="item in menuData" :key="item.key">
              <el-sub-menu v-if="item.children?.length" :index="item.key">
                <template #title>
                  <el-icon v-if="item.icon">
                    <component :is="getMenuIcon(item.icon)" />
                  </el-icon>
                  {{ item.label }}
                </template>
                <el-menu-item
                  v-for="child in item.children"
                  :key="child.key"
                  :index="child.path"
                >
                  {{ child.label }}
                </el-menu-item>
              </el-sub-menu>
              
              <el-menu-item v-else :index="item.path">
                <el-icon v-if="item.icon">
                  <component :is="getMenuIcon(item.icon)" />
                </el-icon>
                {{ item.label }}
              </el-menu-item>
            </template>
          </template>
          
        </el-menu>
      </div>
    </Teleport>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import {
    Odometer,
    Setting,
    Avatar,
    User,
    UserFilled,
    Menu,
    Tools,
    InfoFilled,
    Document,
    DataBoard,
    EditPen
  } from '@element-plus/icons-vue'
  
  const props = defineProps({
    useDynamic: Boolean,
    menuData: Array,
    config: Object
  })
  
  function getMenuIcon(iconName) {
    // 🎯 图标映射表（兼容小写和大写）
    const iconMap = {
      'dashboard': Odometer,
      'system': Setting,
      'user': Avatar,
      'info': InfoFilled,
      'document': Document,
      'Odometer': Odometer,
      'Setting': Setting,
      'Avatar': Avatar,
      'User': User,
      'UserFilled': UserFilled,
      'Menu': Menu,
      'Tools': Tools,
      'InfoFilled': InfoFilled,
      'Document': Document,
      'DataBoard': DataBoard,
      'EditPen': EditPen
    }
    return iconMap[iconName] || Menu
  }
  </script>
  
  <style lang="scss" scoped>
  .horizontal-menu-wrapper {
    height: 100%;
    flex: 1;
    min-width: 0;
  }
  
  :deep(.horizontal-menu) {
    border: none;
    background: transparent;
    height: 100%;
    
    .el-menu-item {
      border-radius: 6px;
      margin: 0 4px;
      height: calc(100% - 8px);
      margin-top: 4px;
      
      &:hover {
        background: var(--el-color-primary-light-9);
      }
      
      &.is-active {
        background: var(--el-color-primary-light-8);
        color: var(--el-color-primary);
        border-bottom: 2px solid var(--el-color-primary);
      }
    }
    
    .el-sub-menu {
      .el-sub-menu__title {
        border-radius: 6px;
        margin: 0 4px;
        height: calc(100% - 8px);
        margin-top: 4px;
        
        &:hover {
          background: var(--el-color-primary-light-9);
        }
      }
      
      // 🎯 下拉菜单样式
      .el-sub-menu__popup {
        .el-menu {
          box-shadow: var(--el-box-shadow-light);
          border: 1px solid var(--el-border-color-light);
        }
      }
    }
  }
  </style>